<template>
  <div class="Search-box">
    <!-- 顶部搜索栏 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      show-action
    >
      <template #left>
        <van-icon name="arrow-left" size="18" @click="GoBack" />
      </template>
      <template #action>
        <div @click="onSearch" class="search-btn">搜索</div>
      </template>
    </van-search>
    <!-- 最近搜索 -->
    <div class="recently-search">
      <h1>最近搜索 <van-icon name="delete-o" @click="getClean" /></h1>
      <van-tag
        plain
        type="primary"
        size="large"
        v-for="(item, index) in recentlySearch"
        :key="index"
        class="hot-tag"
        >{{ item }}</van-tag
      >
    </div>
    <!-- 热门搜索 -->
    <div class="hot-search">
      <h1>热门搜索</h1>
      <van-tag
        plain
        type="primary"
        size="large"
        v-for="(item, index) in hotword"
        :key="index"
        class="hot-tag"
        @click="goSearch(item.keyword)"
        >{{ item.keyword }}</van-tag
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      value: "",
      hotword: [],
      recentlySearch: JSON.parse(localStorage.getItem("recentlySearch")) || [],
    };
  },
  created() {
    this.service({
      url: "/pro/hotword",
    }).then((res) => {
      console.log(res.data.data);
      this.hotword = res.data.data;
    });
  },
  methods: {
    /* 点击搜索 */
    onSearch() {
      this.$router.push({
        path: "/SearchResult",
        query: { keyword: this.value },
      });

      if (this.value) {
        let exist = this.recentlySearch.indexOf(this.value);
        if (exist == -1) {
          this.recentlySearch.unshift(this.value);
          localStorage.setItem(
            "recentlySearch",
            JSON.stringify(this.recentlySearch)
          );
          console.log("this.recently", this.recently);
        } else {
          this.recentlySearch.splice(exist, 1);
          this.recentlySearch.unshift(this.value);
          localStorage.setItem(
            "recentlySearch",
            JSON.stringify(this.recentlySearch)
          );
        }
      } else {
        return;
      }
    },
    /* 点击返回 */
    GoBack() {
      this.$router.go(-1);
    },
    /* 点击清除最近搜索 */
    getClean() {
      this.recentlySearch = [];
    },
    /* 点击热门搜索 */
    goSearch(keyword){
      this.$router.push({
        path: "/SearchResult",
        query: { keyword },
      });
    }
  },
};
</script>

<style scoped>
.Search-box {
  background-color: #efefef;
}
.search-btn {

}
.recently-search {
  width: 100%;
  height: 4.75rem;
  padding-top: 1.25rem;
  padding-left: 1.25rem;
  margin-bottom: 0.9375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  widows: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-search {
  width: 100%;
  height: 8.25rem;
  padding-top: 1.25rem;
  padding-left: 1.25rem;
}
h1 {
  font-size: 14px;
  margin-bottom: 0.3125rem;
}
.hot-tag {
  margin: 0.3125rem;
  color: gray;
}
</style>